<template>
	<view class="content maxHeight">
		<hearBar :ifBackGround='false'></hearBar>
		<view class="left-circle"></view>
		<view class="right-circle">
			<image src="/static/image/login/paint.svg"
				style="width: 180upx;height: 152upx; position: relative;top: 100upx;left: 50upx;"></image>
		</view>
		<view class="text">欢迎登录</view>
		<view class="dot"></view>
		<view class="flex flex-center align-center maxHeight">
			<view style="margin-top: 200upx;" @click="isClick ? '' : noClick">
				<view>
					<view class="flex align-center"><text>手机号：</text><up-input border="bottom"
							v-model="phone"></up-input></view>
					<view class="flex align-center m-t">
						<text>验证码：</text>
						<up-input type="number" border="bottom" v-model="code"></up-input>
						<view class="m-l">
							<up-button @click="sendyan">获取验证码</up-button>
						</view>
					</view>
					<up-button type='primary' class='m-t-ll' @click='phoneLogin'>登录</up-button>
					<button class="login font-white  flex flex-center align-center bt-red  m-t-ll" open-type="getPhoneNumber"
						@getphonenumber="onGetPhoneNumber">
						<div style="font-size: 14px;">本机快捷登录</div>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { login, sendmessage, login_by_user } from '../../utils/api';
import { dbSet } from '../../utils/db';
import {
	ref
}
	from 'vue'
const isClick = ref(true);
const noClick = () => {
	uni.showToast({
		icon: "error",
		title: "请勾选用户协议"
	})
}
const onGetPhoneNumber = (info) => {
	let errorCode = info.detail.errMsg
	if (errorCode !== 'getPhoneNumber:ok') {
		return;
	}
	let phoneCode = info.detail.code;
	uni.login({
		success: ({
			code: loginCode
		}) => {
			login({
				loginCode,
				phoneCode
			}).then((res) => {
				console.log(res);
				let {
					token,
					openid
				} = res.data;
				dbSet("X-TOKEN", token);
				dbSet("openid", openid);
				uni.showToast({
					title: "登录成功"
				})
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/home/index"
					})
				}, 1500)
			})
		}
	})

}
const sendyan = () => {
	sendmessage({ phone: phone.value }).then((res) => {
		if (res.code === 200) {
			uni.showToast({
				title: "发送成功"
			})
		} 
	}).catch(() => { });
}
const loginByOhter = () => { }

const phone = ref("")
const code = ref("")

const phoneLogin = () => {
	uni.login({
		success: ({
			code: loginCode
		}) => {
			login_by_user({
				loginCode,
				phone: phone.value,
				code: code.value
			}).then((res) => {
				if (res.code === 200) {
					let {
						token,
						openid
					} = res.data;
					dbSet("X-TOKEN", token);
					dbSet("openid", openid);
					uni.showToast({
						title: "登录成功"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/home/index"
						})
					}, 1500)
				}
			})
		}
	})
}


</script>

<style lang="less" scoped>
button::after {
	border: none;
}

.bac-gray-more {
	background: #d2cfcf;
}

.left-circle {
	width: 484*2upx;
	height: 484*2upx;
	border-radius: 50%;
	background: rgba(255, 86, 120, 0.1);
	position: absolute;
	left: -380upx;
	top: -380upx;
}

.dot {
	position: fixed;
	left: 340upx;
	top: 360upx;
	width: 16upx;
	height: 16upx;
	opacity: 1;
	border-radius: 50%;
	border: 2px solid rgba(255, 102, 97, 1);
}

.text {
	position: fixed;
	left: 66upx;
	top: 364upx;
	width: 270upx;
	height: 94upx;
	/** 文本1 */
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0px;
	line-height: 92upx;
	color: rgba(27, 27, 33, 1);
	text-align: center;
	vertical-align: top;
}

.login {
	width: 100%;
	height: 80upx
}

.right-circle {
	position: fixed;
	right: -150upx;
	bottom: -150upx;
	width: 400upx;
	height: 400upx;
	background: rgba(255, 86, 120, 0.1);
	border-radius: 50%;
}
</style>